<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{url_for('static',filename='css/style.css',_external=True)}}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航和语言对话</title>
</head>
<body>
  <div class="all">
    <div class="navbar">
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">服务</a>
        <a href="#">联系我们</a>
      </div>
    <div class="chat-box" id="chatBox">
      <div class="bot-message">欢迎来到语言对话界面！</div>
    </div>

  <div id="response">

  </div>
    <div class="text-boot">
             
              <input type="text" id="userInput" name ="account" placeholder="请输入您的消息...">
              <button onclick="sendMessage()">发送</button>
    </div>

    <div class="modles">
      {% for row in data %}
        <div class="box">{{ row | replace("(", "") | replace(")", "") | replace(",", "") | replace("'", "") | replace('"', '') }}</div>
      {% endfor %}
    </div>
  </div>
  

  <script>
// 获取页面元素
const chatBox = document.getElementById('chatBox');
const userInput = document.getElementById('userInput');

const box=document.querySelector('.box')
box.addEventListener("click", function () {
 userInput.value=box.textContent
});
// 发送用户消息并获取回复
function sendMessage() {

  const userMessage = userInput.value;
  if (userMessage.trim() === '') return;
  
  // 显示用户消息
  const userDiv = document.createElement('div');
  userDiv.classList.add('user-message');
  userDiv.textContent = userMessage;
  chatBox.appendChild(userDiv);




let answer
const message = document.getElementById('userInput').value;
fetch('/post', {
    method: 'POST',
    headers: {
          'Content-Type': 'application/json'
      },
    body: JSON.stringify({ message: message })
  })
  .then(response => response.json())
  .then(data => {
      console.log('Success:', data);
    answer=data.answer
    const botMessage =answer
  // 显示机器人回复
const botDiv = document.createElement('div');
botDiv.classList.add('bot-message');
botDiv.textContent = botMessage;
chatBox.appendChild(botDiv);
    })
  .catch((error) => {console.error('Error:', error);});
  



  // 清空输入框
userInput.value = '';
}

// 获取机器人回复（这里是一个简单的示例）

  </script>


</body>
</html>
